<!doctype html>
<html lang="en">
<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>：总有人懂你的欲言又止</title>
		<meta name="description" content="A jQuery Scrollify recreation of Apple's iPhone 5c scrolling page.">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta property="og:title" content="jQuery Scrollify - Apple Example">
		<script src="js/html5shiv.min.js"></script>
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300"/>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="shortcut icon" href="./images/bitbug_favicon.ico" />
	<style>
		*{

		}
		body { margin: 0; padding: 0; position: relative; background-image: url(images/xh.jpg); background-position: center; /*background-repeat: no-repeat;*/ width: 100%; height: 100%; background-size: 100% 100%;			font-family: "黑体"; }

		canvas{
			position: fixed;
			top:0;
			left:0;
			width: 100%;
			z-index: 999999999999999;
		}
		.contentLeft{
			width: 160px;
			padding: 10px;
			margin-top:60px;
			margin-left: 30px;
			background-image: url(./images/timg.gif);
			background-size: 40% 35%;
			background-position: 0px 0px;
		}
		.leftOne{
			margin-top: 15px;
			padding: 5px 10px;
			height:10px;
			white-space: nowrap;
			border-radius: 10px;
			border:1px white dashed;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			background-repeat: no-repeat;
			transition: 2s;
		}
		.contentRight{
			width: 260px;
			border-radius: 10px;
			border: 1px white dashed;
			position: absolute;
			top:150px;
			right: -920px;
			height:150px;
			padding: 10px;
			box-sizing: border-box;
			color: white;
			line-height: 21.5px;
		}

		.timeOur{
			position: absolute;
			top:-900px;
			left:415px;
			color: white;
			/*animation: timeOur 5s 19s 3;*/
		}
		.time{
			position: absolute;
			top:-900px;
			left:380px;
			margin:  0 auto;
			color: white;
			background-image: url(./images/timg.gif);
			/*background-repeat: no-repeat;*/
			overflow: hidden;
			z-index: 30;
		}
		.time span{
			margin-left: 5px;
			display: block;
			float: left;
			width:30px;
			height:30px;
			/*background-color: white;*/
			border-radius:5px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			background-image: url(./images/日历.png);
			background-repeat: no-repeat;
			background-size: 100%;
			padding-top: 3px;
		}
		.video{
			position: absolute;
			bottom:-900px;
			left:0px;
			right:70px;
			margin: 0 auto;
			width: 320px;
			height:290px;
			z-index: 999;
		}
		.videoPlay{
			position: absolute;
			bottom:0px;
			left:0px;
			right:70px;
			margin: 0 auto;
			width: 320px;
			height:290px;
			z-index: 999;
		}
		.video img{
			width: 100%;
			height:190px;
			margin-top: 70px;
			z-index: 999;
		}
		.imgBG{
			width: 200px;
			height:0px;
			position: absolute;
			right:-30px;
			top: -50px;
			background-image: url(./images/1.jpg);
			background-size: 80%;
			background-repeat: no-repeat;
			animation: bgOne 7s 7s 1;
		}
		.span{
			position: absolute;
			right:200px;
			top: 60px;
			color: #fff;
			opacity: 0;
		}
		.borderS1{
			width: 0px;
			height:0px;
			position: absolute;
			right: 170px;
			top:50px;
			border:1px white dashed;
			transition: 3s;
		}
		.borderS2{
			width: 0px;
			height:0px;
			position: absolute;
			left: 580px;
			top:130px;
			border:1px white dashed;
			transition: 3s;
		}
		.borderS3{
			width: 0px;
			height:0px;
			position: absolute;
			left: 580px;
			top:50px;
			border:1px white dashed;
			transition: 3s;
		}
		.borderS4{
			width: 0px;
			height:0px;
			position: absolute;
			left: 682px;
			bottom:261px;
			border:1px white dashed;
			transition: 3s;
		}


		/* 本例子css */
		.picMarquee-left{ width:100%;  overflow:hidden; position:relative;  border:1px solid #ccc; margin-top: 5px; bottom: -900px;}
		.picMarquee-left .bd{ padding:10px;   }
		.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }
		.picMarquee-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
		.picMarquee-left .bd ul li .pic{ text-align:center; }
		.picMarquee-left .bd ul li .pic img{ width:60px; height:60px; display:block; padding:0px; border:1px solid #ccc; }
		.picMarquee-left .bd ul li .pic a:hover img{ border-color:#999;  }
		.picMarquee-left .bd ul li .title{ line-height:24px; }

		.love{
			position: absolute;
			top:-900px;
			left:210px;
			z-index: 29;
		}

		@keyframes bgOne {
			0%{opacity: 0}
			10%{opacity: 1}
			20%{opacity: 0}
			30%{opacity: 1}
			40%{opacity: 0}
			50%{opacity: 1}
			60%{opacity: 0}
			70%{opacity: 1}
			80%{opacity: 0}
			100%{opacity: 1}
		}

		/*@keyframes timeOur{*/
			/*0%{opacity: 0}*/
			/*20%{opacity: 1}*/
			/*40%{opacity: 0}*/
			/*60%{opacity: 1}*/
			/*80%{opacity: 0}*/
			/*100%{opacity: 1}*/
		/*}*/


		.headerTwo{
			width: 400px;
			border: 1px white solid;
			padding: 10px;
			color: white;
			font-size: 20px;
			position: absolute;
			left:50px;
			top:20px;
		}

		.videoTwo{
			width: 422px;
			height:80%;
			position: absolute;
			left:50px;
			top:50px;
		}

		.textOne{
			width: 500px;
			/*border: 1px white solid;*/
			padding: 10px;
			color: white;
			position: absolute;
			left:30px;
			top:20px;
			line-height: 20px;
		}
		.last{
			border:2px white dashed;
			border-radius: 20px;
			padding: 20px;
			font-size: 55px;
			position: absolute;
			left: 180px;
			top:100px;
			color: #fff;
			font-family: "Bookman Old Style";
		}
	</style>
</head>
<body id="body" onLoad="init()" style="background-color: #000">
<div class="audio" id="audio"><audio src="./mp3/陶喆%20-%20爱很简单.mp3" hidden autoplay loop></audio></div>
<section class="panel home" data-section-name="home" style="background-color:#000;position: relative;height: 100%;">
	<div class="video" id="video">
		<img src="./images/u=1576788186,4000013657&fm=27&gp=0%20(1).jpg" alt="">
	</div>

	<div style="color: white;position: absolute;left:235px;
			right:70px;
			margin: 0 auto; bottom: -900px;" id="asd">世间最好的默契，并非有人懂你的言外之意，而是有人懂你的欲言又止！</div>

	<div class="borderS1"></div>
	<div class="borderS2"></div>
	<div class="borderS3"></div>
	<div class="borderS4"></div>

	<span class="span" style="right: 250px;" id="a">不</span>
	<span class="span" style="right: 240px;" id="b">要</span>
	<span class="span" style="right: 230px;" id="c">离</span>
	<span class="span" style="right: 220px;" id="d">开</span>
	<span class="span" style="right: 210px;" id="e">我</span>
	<span class="span" style="right: 200px;" id="f">好</span>
	<span class="span" style="right: 190px;" id="g">吗</span>
	<span class="span" style="right: 180px;" id="h">？</span>
	<span class="span" style="right: 250px; top: 75px;" id="i">我</span>
	<span class="span" style="right: 240px; top: 75px;" id="j">想</span>
	<span class="span" style="right: 230px; top: 75px;" id="k">就</span>
	<span class="span" style="right: 220px; top: 75px;" id="l">这</span>
	<span class="span" style="right: 210px; top: 75px;" id="m">样</span>
	<span class="span" style="right: 250px; top: 90px;" id="n">保</span>
	<span class="span" style="right: 240px; top: 90px;" id="o">护</span>
	<span class="span" style="right: 230px; top: 90px;" id="p">你</span>
	<span class="span" style="right: 220px; top: 90px;" id="q">一</span>
	<span class="span" style="right: 210px; top: 90px;" id="r">辈</span>
	<span class="span" style="right: 200px; top: 90px;" id="s">子</span>
	<span class="span" style="right: 190px; top: 90px;" id="t">！</span>
	<span class="span" style="right: 220px; top: 110px" id="u">—&nbsp;</span>
	<span class="span" style="right: 210px; top: 110px" id="v">张</span>
	<span class="span" style="right: 200px; top: 110px" id="w">永</span>
	<span class="span" style="right: 190px; top: 110px" id="x">旺</span>


	<div class="imgBG"></div>

	<div class="timeOur">
		我们已经在一起：
	</div>

	<div class="time" id="time">
		<span id="_d">00</span>
		<span id="_h">00</span>
		<span id="_m">00</span>
		<span id="_s">00</span>
	</div>
	<div class="contentLeft">
		<div class="leftOne" style="margin-top: -20px;opacity: 1;border: 0px;" id="bgTwo">
			<img src="./images/6.jpg" alt="" width="100%" height="0px;" style="margin-top: -55px;">
		</div>
		<div class="leftOne" id="one">
			<p>第一次相识：2016.07.04</p>
		</div>
		<div class="leftOne" id="two">
			<p>相&nbsp;&nbsp;恋&nbsp;&nbsp;日：2017.01.18</p>
		</div>
		<div class="leftOne" id="three">
			<p>第一次接吻：2017.01.27</p>
		</div>
		<div class="leftOne" id="four">
			<p>第一次旅行：2017.04.05</p>
		</div>
		<div class="leftOne" id="five">
			<p>第一次合影：2018.04.05</p>
		</div>
		<div class="leftOne" id="six">
			<p>第一次嘿嘿：2017.10.01</p>
		</div>
	</div>

	<div class="contentRight">
		&emsp;整理琐碎的记忆，还有心底深处那些柔软的感动，用满心的欢喜，静守你给的温情，前世也好，来生也罢，我宁愿是你梦中那个素衣的女子，为你，守候红尘。悠远的时光，就这样铺陈了一幅飘红的画卷，你的絮语，你的微笑，依然温暖无限。
		<br>
		&emsp;亲爱的，我想你了！
	</div>


	<div class="picMarquee-left">
		<div class="bd">
			<ul class="picList">
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" height="0px"/></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
				<li>
					<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/1.jpg" /></a></div>
				</li>
			</ul>
		</div>
	</div>

	<div class="love">
		<img src="./images/5.jpg" alt="" width="40%">
	</div>


	<ul class="pagination">
		<li><a href="#home" class="active"><span class="hover-text">Home</span></a></li>
		<li><a href="#design"><span class="hover-text">Design</span></a></li>
		<li><a href="#features"><span class="hover-text">Features</span></a></li>
		<li><a href="#ios7"><span class="hover-text">iOS7</span></a></li>
	</ul>
</section>
<section class="panel design" data-section-name="design" style="background-image: url(./images/sss.gif);background-size: 100% 100%;background-position: 100px 0">
	<div class="headerTwo">
		后来的我们什么都有了，却没有了我们...
	</div>
	<video class="videoTwo" src="./mp4/国产优秀感人爱情动画短片《我们的世界》_腾讯视频.mp4" controls loop poster="./images/p2520456501.webp"></video>
</section>
<section class="panel features" data-section-name="features" style="background-image: url(./images/11.jpg);background-size: 100% 100%;background-position: 70px 0">
	<div class="textOne">
		1.最大的遗憾是连离开都不能当面说清或许一个拥抱能解决的事情最后却是没有任何解释的形同陌路。 <br>
		2.喜欢你这么长时间来所有的感情不过就是一句心酸，那些藏匿在逼仄炎热的夏天里没来得及说出口的欢喜和心事，被你一句不合适击碎地连最后的奢望都成为泡沫，那种感觉就像是从来没有喝过酒的人被那种辛辣刺激地除了满眼通红什么都说不出来的无奈和疲乏，那些年里我是真的义无反顾地喜欢过你，如今，当我亲身尝过爱情的滋味，才恍然明白，那时的他是真的不爱我，我所有的小鹿乱撞沾沾自喜，不过是自己陪自己演的一场戏。 <br>
		3.很多人闯进你的生活，只是为了给你上一课，然后转身离开。 <br>
		4.距离大概就是指你知道我没睡，我也知道你没睡，看着彼此更新的消息，却不能说上一句话。 <br>
		5.最后爱的人都变成了什么，茶余饭后的闲谈，深夜卧床的辗转，电影主角的代换，是寒冬的袄，初秋的衫，血战的马，最终的疤。 <br>
		6.输入法都记得的人怎么可能忘记。<br>
		7.你是不是又在苦心翻找一句话，只为了给那个人看。 <br>
		8.明明说着看开了，放下了，每次却总是不自觉的想起那个给与温暖的人。每每又总是在微笑沉醉时看到了现实，想到了伤痛，然后，冷的感觉再也暖和不起来了。如此反复，心，终于累了，现实就是这样。 <br>
		9.若，我们擦肩而过时，彼此不曾回眸，我想，我还是一个不谙花事的年少，倚楼听风雨，淡看江湖路，不言情奈，不诉离殇。烟雨岁月，氲了满地落红，沧桑流年，葬了曾经心痛。落笔时，一痕浅忧入眉弯，回首处，倩影离去已经年。梦碎指间，情难收，人空瘦，都付了，一纸虚空。梦尽处，你是我回不去曾经。 <br>
		... <br>
	</div>
</section>
<section class="panel ios7" data-section-name="ios7" style="background-image: url(./images/xh.jpg);background-size: 100% 100%;">
	<p class="last">亲爱的，我想你了！</p>
</section>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><!--jQuery文件-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="js/ThreeCanvas.js"></script>
<script type="text/javascript" src="js/Snow.js"></script>
<script src="js/jquery.scrollify.js"></script>

<script src="js/main.js"></script>
	<script type="text/javascript">
    var SCREEN_WIDTH = window.innerWidth;
    var SCREEN_HEIGHT = window.innerHeight;
    var container;
    var particle;//粒子

    var camera;
    var scene;
    var renderer;

    var starSnow = 1;

    var particles = [];

    var particleImage = new Image();
    //THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
    particleImage.src = 'images/ParticleSmoke.png';


    function init() {
      //alert("message3");
      container = document.createElement('div');//container：画布实例;
      document.body.appendChild(container);

      camera = new THREE.PerspectiveCamera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
      camera.position.z = 1000;
      //camera.position.y = 50;

      scene = new THREE.Scene();
      scene.add(camera);

      renderer = new THREE.CanvasRenderer();
      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
      var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
      //alert("message2");
      for (var i = 0; i < 250; i++) {
        //alert("message");
        particle = new Particle3D( material);
        particle.position.x = Math.random() * 2000-1000;

        particle.position.z = Math.random() * 2000-1000;
        particle.position.y = Math.random() * 2000-1000;
        //particle.position.y = Math.random() * (1600-particle.position.z)-1000;
        particle.scale.x = particle.scale.y =  1;
        scene.add( particle );

        particles.push(particle);
      }

      container.appendChild( renderer.domElement );


      //document.addEventListener( 'mousemove', onDocumentMouseMove, false );
      document.addEventListener( 'touchstart', onDocumentTouchStart, false );
      document.addEventListener( 'touchmove', onDocumentTouchMove, false );
      document.addEventListener( 'touchend', onDocumentTouchEnd, false );

      setInterval( loop, 1000 / 1000 );

    }

    var touchStartX;
    var touchFlag = 0;//储存当前是否滑动的状态;
    var touchSensitive = 80;//检测滑动的灵敏度;
    //var touchStartY;
    //var touchEndX;
    //var touchEndY;
    function onDocumentTouchStart( event ) {

      if ( event.touches.length == 1 ) {

        event.preventDefault();//取消默认关联动作;
        touchStartX = 0;
        touchStartX = event.touches[ 0 ].pageX ;
        //touchStartY = event.touches[ 0 ].pageY ;
      }
    }


    function onDocumentTouchMove( event ) {

      if ( event.touches.length == 1 ) {
        event.preventDefault();
        var direction = event.touches[ 0 ].pageX - touchStartX;
        if (Math.abs(direction) > touchSensitive) {
          if (direction>0) {touchFlag = 1;}
          else if (direction<0) {touchFlag = -1;};
          //changeAndBack(touchFlag);
        }
      }
    }

    function onDocumentTouchEnd (event) {
      // if ( event.touches.length == 0 ) {
      // 	event.preventDefault();
      // 	touchEndX = event.touches[ 0 ].pageX ;
      // 	touchEndY = event.touches[ 0 ].pageY ;

      // }这里存在问题
      var direction = event.changedTouches[ 0 ].pageX - touchStartX;

      changeAndBack(touchFlag);
    }


    function changeAndBack (touchFlag) {
      var speedX = 25*touchFlag;
      touchFlag = 0;
      for (var i = 0; i < particles.length; i++) {
        particles[i].velocity=new THREE.Vector3(speedX,-10,0);
      }
      var timeOut = setTimeout(";", 800);
      clearTimeout(timeOut);

      var clearI = setInterval(function () {
        if (touchFlag) {
          clearInterval(clearI);
          return;
        };
        speedX*=0.8;

        if (Math.abs(speedX)<=1.5) {
          speedX=0;
          clearInterval(clearI);
        };

        for (var i = 0; i < particles.length; i++) {
          particles[i].velocity=new THREE.Vector3(speedX,-10,0);
        }
      },100);


    }


    function loop() {
      for(var i = 0; i<particles.length; i++){
        var particle = particles[i];
        particle.updatePhysics();

        with(particle.position)
        {
          if((y<-1000)&&starSnow) {y+=2000;}

          if(x>1000) x-=2000;
          else if(x<-1000) x+=2000;
          if(z>1000) z-=2000;
          else if(z<-1000) z+=2000;
        }
      }

      camera.lookAt(scene.position);

      renderer.render( scene, camera );
    }
	</script>
<script>


  var body = document.getElementById('video');
  function addElement(){
    body.innerHTML = '<video class="videoPlay" loop controls style="z-index: 100;" id="video" autoplay>\n' +
      '  <source src="./mp4/国产优秀感人爱情动画短片《我们的世界》_腾讯视频.mp4" type="video/mp4">\n' +
      '</video>'
  }
  setTimeout("addElement()",23000);

  var audio = document.getElementById('audio');
  function addElementAudio(){
    audio.innerHTML = ''
  }
  setTimeout("addElementAudio()",23000);


  $(document).ready(function(e) {
    $("#one").css({ left: "-932px"}).show().animate({ left: "0px" },100, "swing");
    $("#two").css({ left: "-932px"}).show().animate({ left: "0px" }, 600, "swing");
    $("#three").css({ left: "-932px"}).show().animate({ left: "0px" }, 1200, "swing");
    $("#four").css({ left: "-932px"}).show().animate({ left: "0px" }, 1800, "swing");
    $("#five").css({ left: "-932px"}).show().animate({ left: "0px" }, 2400, "swing");
    $("#six").css({ left: "-932px"}).show().animate({ left: "0px" }, 3000, "swing");
    setTimeout(function () {
      $(".imgBG").css({ height:"0"}).show().animate({ height:"190px" }, 2000, "swing");
    },3500)
    $("#bgTwo img").css({ height:"0px"}).show().animate({ height:"100px" }, 5000, "swing");
    setTimeout(function () {
      $(".borderS1").css({ width:"0px",height:"0px"}).show().animate({ width:"100px",height:"0px" }, 5000, "swing");
      $(".borderS2").css({ width:"0px",height:"0px"}).show().animate({ width:"100px",height:"0px" }, 5000, "swing");
      $(".borderS3").css({ width:"0px",height:"0px"}).show().animate({ width:"0px",height:"80px" }, 6000, "swing");
      $(".borderS4").css({ width:"0px",height:"0px"}).show().animate({ width:"0px",height:"80px" }, 6000, "swing");
    },500)
      setTimeout(function () {
        $("#a").css({ opacity:"0"}).show().animate({ opacity:"1" }, 100, "swing");
      },7000)
    setTimeout(function () {
      $("#b").css({ opacity:"0"}).show().animate({ opacity:"1" }, 100, "swing");
    },7300)
    setTimeout(function () {
      $("#c").css({ opacity:"0"}).show().animate({ opacity:"1" }, 100, "swing");
    },7600)
    setTimeout(function () {
      $("#d").css({ opacity:"0"}).show().animate({ opacity:"1" }, 100, "swing");
    },7900)
    setTimeout(function () {
      $("#e").css({ opacity:"0"}).show().animate({ opacity:"1" }, 100, "swing");
    },8200)
    setTimeout(function () {
      $("#f").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },8500)
    setTimeout(function () {
      $("#g").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },8800)
    setTimeout(function () {
      $("#h").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },9100)
    setTimeout(function () {
      $("#i").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },9400)
    setTimeout(function () {
      $("#j").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },9700)
    setTimeout(function () {
      $("#k").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },10000)
    setTimeout(function () {
      $("#l").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },10300)
    setTimeout(function () {
      $("#m").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },10600)
    setTimeout(function () {
      $("#n").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },10900)
    setTimeout(function () {
      $("#o").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },11200)
    setTimeout(function () {
      $("#p").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },11500)
    setTimeout(function () {
      $("#q").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },11800)
    setTimeout(function () {
      $("#r").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },12100)
    setTimeout(function () {
      $("#s").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },12400)
    setTimeout(function () {
      $("#t").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },12700)
    setTimeout(function () {
      $("#u").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },13000)
    setTimeout(function () {
      $("#v").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },13300)
    setTimeout(function () {
      $("#w").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },13600)
    setTimeout(function () {
      $("#x").css({ opacity:"0"}).show().animate({ opacity:"1" }, 0, "swing");
    },13900)
		setTimeout(function () {
      $(".contentRight").css({ right: "-932px"}).show().animate({ right: "13px" }, 3000, "swing");
    },12700)
    setTimeout(function () {
      $(".picMarquee-left").css({ bottom: "-932px"}).show().animate({ bottom: "0" }, 4000, "swing");
    },12700)
    setTimeout(function () {
      $(".video").css({ bottom: "-932px"}).show().animate({ bottom: "90px" }, 5000, "swing");
    },14000)
    setTimeout(function () {
      $("#asd").css({ bottom: "-932px"}).show().animate({ bottom: "100px" }, 4500, "swing");
    },13000)
		setTimeout(function () {
		  $(".pic a img").css({ height:"0px"}).show().animate({ height:"60px"},7000,"swing")
    },13500)
    setTimeout(function () {
      $(".time").css({ top: "-900px"}).show().animate({ top: "35px" }, 6000, "swing");
    },15000)
    setTimeout(function () {
      $(".love").css({ top: "-900px"}).show().animate({ top: "-15px" }, 6500, "swing");
    },15500)
    setTimeout(function () {
      $(".timeOur").css({ top: "-900px"}).show().animate({ top: "10px" }, 7000, "swing");
    },16000)


















  });


  //时间搓转倒计时
  function countTime() {
    //获取当前时间
    var date = new Date();
    var now = date.getTime();
    //设置截止时间
    var endDate = new Date("2017-1-18 9:0:0");
    var end = endDate.getTime();
    //时间差
    var leftTime = now-end;
    //定义变量 d,h,m,s保存倒计时的时间
    var d,h,m,s;
    if (leftTime>=0) {
      d = Math.floor(leftTime/1000/60/60/24);
      var d1 = d<10? d1 = '0' + d : d1 = d
      h = Math.floor(leftTime/1000/60/60%24);
      var h1 = h<10? h1 = '0' + h : h1 = h
      m = Math.floor(leftTime/1000/60%60);
      var m1 = m<10? m1 = '0' + m : m1 = m
      s = Math.floor(leftTime/1000%60);
      var s1 = s<10? s1 = '0' + s : s1 = s
    }
    //将倒计时赋值到div中
    document.getElementById("_d").innerHTML = d1+"天";
    document.getElementById("_h").innerHTML = h1+"时";
    document.getElementById("_m").innerHTML = m1+"分";
    document.getElementById("_s").innerHTML = s1+"秒";
  }
  //每秒调用执行一次
  setInterval(function () {
    countTime()
  },1000)


  jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:11,interTime:50});

</script>
</body>
</html>
